<template>
  <div class="warp_all">
    <div class="mask"></div>
    <div catchtap="null" class="warp">
      <div class="register_box">
        <div class="register_box_tit" v-if="isLogin==0">欢 迎 登 录</div>
        <div class="register_box_tit" v-if="isLogin==1">欢 迎 注 册</div>
        <div class="register_box_tit" v-if="isLogin==2">忘 记 密 码</div>
        <div class="gen" style="color:#B9BED1;font-size:11px;padding-bottom:10px;">请你使用本人账号密码登录</div>
        <div class="bind_item">
          <img src="../assets/ic_home.png" />
          <input placeholder="请填写您的手机号码" v-model="phoneNumber" maxlength="11" type="text" />
        </div>
        <div class="bind_item" v-if="isLogin==1||isLogin==2">
          <img src="../assets/ic_pass.png" />
          <input
            placeholder="请输入手机验证码"
            v-model="code"
            maxlength="4"
            type="text"
            bindinput="bindCode"
            oninput="if(value.length>4)value=value.slice(0,4)"
          />
          <div
            class="getCode getCode_default"
            style="border:1px  solid #ccc;color:#ccc"
            v-if="canClickVerifyButton"
          >{{verifyMessage}}</div>
          <div class="getCode" @click="getCode" v-else>{{verifyMessage}}</div>
        </div>
        <div class="bind_item">
          <img src="../assets/ic_pass.png" />
          <input placeholder="请填写您的密码" v-model="passNumber" maxlength="11" type="password" />
        </div>
        <div class="forget_warp" v-if="isLogin==0">
          <div class="forget_left">
            <div style="width:18px;height:18px" @click="chooseLoc" class="forget_left_l">
              <img
                v-if="isLoc"
                style="width:18px;height:18px;display:block"
                src="../assets/ic_dui.png"
                alt
              />
            </div>
            <div>两周内自动登录</div>
          </div>
          <div @click="forgetBtn">忘记密码?</div>
        </div>
        <!-- <choose-city 
        @sendCity1='sendCity1'
        @sendCity2='sendCity2'
        ></choose-city>-->
        <!-- <div class="http">
        <img @click="isHttp" src="../assets/ic_type.png" v-if="isHtpp" alt />
        <img @click="isHttp" src="../assets/ic_type.png" v-else alt />
        <div>
          我已同意
          <span @click="protocol">《聊Q小屋协议》</span>
        </div>
        </div>-->
        <div class="sure" v-if="isLogin==0" @click="loginBtn">登 陆</div>
        <div class="sure" v-if="isLogin==1" @click="loginBtn">注 册</div>
        <div class="sure" v-if="isLogin==2" @click="loginBtn">登 陆</div>
        <div class="change" v-if="isLogin==0" @click="changeLogin(1)">
          没有账号?
          <span style="color:#0076FE">去注册</span>
        </div>
        <div class="change" v-if="isLogin==1" @click="changeLogin(0)">
          已有账号,
          <span style="color:#0076FE">去登录</span>
        </div>
      </div>
    </div>
  </div>
</template>
<!-- <script src="//cdn.bootcss.com/eruda/1.5.2/eruda.min.js"></script>
<script>
	eruda.init();
</script>-->
<script>
import * as API from "@/http/common/api";
import { Calendar, Group, PopupPicker, Picker } from "vux";
import axios from "axios";
import Vue from "vue";
export default {
  name: "register",
  data() {
    return {
      isLoc: true, //是否存7天
      userID: 999, //测试id
      isLogin: 0,
      phoneNumber: "", //手机号
      passNumber: "", //密码
      canClickVerifyButton: true, //能发送信息状态
      verifyMessage: "获取验证码",
      isHtpp: true, //是否勾选协议
      code: null, //验证码
      longitude: 0, //经度
      latitude: 0, //纬度
      city1: "",
      city2: "",
      city: "",
      wxcode: null,
      userInfo: null,
      timer: null,
      latitude: null,
      longitude: null
    };
  },
  created() {},
  methods: {
    //登录注册 切换
    changeLogin(e) {
      this.isLogin = e;
    },
    // 手机号
    isLegal() {
      var myreg = /^(((13[0-9]{1})|(14[0-9]{1})|(15[0-9]{1})|(16[0-9]{1})|(19[0-9]{1})|(18[0-9]{1})|(17[0-9]{1}))+\d{8})$/;
      if (!myreg.test(this.phoneNumber)) {
        return false;
      } else {
        return true;
      }
    },

    //登陆btn
    loginBtn() {
      var that = this;
      if (!this.isLegal(this.phoneNumber)) {
        this.$vux.toast.show({
          text: "手机号有误",
          type: "text"
        });
        return;
      }
      if (!this.code && this.isLogin != 0) {
        this.$vux.toast.show({
          text: "验证码有误",
          type: "text"
        });
        return;
      }
      if (!this.passNumber) {
        this.$vux.toast.show({
          text: "密码不能为空",
          type: "text"
        });
        return;
      }
      if (this.isLogin == 1) {
        this.registerLogin(); //注册
      }
      if (this.isLogin == 0) {
        this.login(); //登录
      }
      if (this.isLogin == 2) {
        this.changePass(); //修改密码
      }
    },
    changePass() {
      this.$http(API.resetpwd, {
        type: "GET",
        params: {
          mobile: this.phoneNumber,
          captcha: this.code,
          newpassword: this.passNumber
        }
      }).then(res => {
        console.log(res);
        if (res.data.code == 1) {
          this.$vux.toast.show({
            text: "修改成功",
            type: "text"
          });
          this.login(); //登录
        } else {
          this.$vux.toast.show({
            text: res.data.msg,
            type: "text"
          });
        }
      });
    },
    login() {
      this.$http(API.login, {
        type: "GET",
        params: {
          account: this.phoneNumber,
          password: this.passNumber
        }
      }).then(res => {
        console.log(res);
        if (res.data.code == 1) {
          this.$vux.toast.show({
            text: "登录成功",
            type: "text"
          });
          this.$localStorage.set(
            "userInfo",
            JSON.stringify(res.data.data.userinfo)
          );
          this.$router.push({ path: "/index" });
        } else {
          this.$vux.toast.show({
            text: res.data.msg,
            type: "text"
          });
        }
      });
    },
    //勾选
    chooseLoc() {
      this.isLoc = !this.isLoc;
    },
    //注册
    registerLogin() {
      this.$http(API.register, {
        type: "GET",
        params: {
          mobile: this.phoneNumber,
          password: this.passNumber,
          code: this.code
        }
      }).then(res => {
        console.log(res);
        if (res.data.code == 1) {
          this.$vux.toast.show({
            text: "注册成功",
            type: "text"
          });
          this.$localStorage.set(
            "userInfo",
            JSON.stringify(res.data.data.userinfo)
          );
          this.$router.push({ path: "/index" });
        } else {
          this.$vux.toast.show({
            text: res.data.msg,
            type: "text"
          });
        }
      });
    },
    //忘记密码
    forgetBtn() {
      this.changeLogin(2);
    },
    //验证码
    getCode() {
      var that = this;
      this.$http(API.GET_SMS, {
        type: "GET",
        params: {
          mobile: this.phoneNumber,
          event: this.isLogin == 1 ? "" : "resetpwd"
        }
      }).then(res => {
        console.log(res);
        if (res.data.code == 1) {
          this.$vux.loading.hide();
          this.$vux.toast.show({
            text: "发送验证码成功",
            type: "text"
          });
          //倒计时
          var time = 60;
          (this.verifyMessage = time + "s后重新获取"),
            (this.canClickVerifyButton = true);
          that.timer = setInterval(() => {
            time--;
            if (time == 1 || time < 0) {
              that.timer && clearInterval(that.timer);
              this.verifyMessage = "重新获取验证码";
              this.canClickVerifyButton = false;
              return;
            }
            (that.verifyMessage = time + "s后重新获取"),
              (that.canClickVerifyButton = true);
          }, 1000);
        } else {
          this.$vux.toast.show({
            text: res.data.msg,
            type: "text"
          });
        }
      });
    }
  },
  watch: {
    phoneNumber(newVal, oldVal) {
      if (!newVal) return;
      if (newVal.length == 11) {
        this.canClickVerifyButton = false;
      } else {
        this.canClickVerifyButton = true;
      }
    },
    city1(newVal, oldVal) {
      console.log(newVal);
      if (newVal.indexOf("市") > -1) {
        this.city = newVal;
      }
    },
    city2(newVal, oldVal) {
      if (newVal.indexOf("市") > -1) {
        this.city = newVal;
      }
    }
  },
  mounted() {
    // this.first()
    var that = this;
  },

  components: {
    Group,
    Calendar,
    PopupPicker,
    Picker
  }
};
</script>
<style scoped >
html {
}
body {
  background: #fff !important;
}
.http {
  display: flex;
  margin-top: 20px;
  align-items: center;
  font-size: 24px;
}
.http > img {
  width: 32px;
  height: 34px;
  margin-right: 19px;
}
.mask {
  position: fixed;
  left: 0px;
  top: 0;
  width: 100%;
  height: 100%;
  background: #fff;
  background-image: url("../assets/rigster_bg.png");
  background-size: 100% 100%;
}
.warp_all {
  width: 100%;
  height: 100%;
  background: #fff !important;
  padding-top: 200px;
  box-sizing: border-box;
}
#app {
  width: 100%;
  height: 100%;
}
.head {
  width: 100px;
  height: 100px;
  margin: 0 auto;
  padding-top: 60px;
  margin-bottom: 60px;
}
.warp {
  background: #fff;
  margin: 0 auto;
  width: 640px;
  box-sizing: border-box;
  position: relative;
  background-image: url("../assets/ic_fff_bg.png");
  background-size: 100% 100%;
  /* margin-top: 200px; */
}
.bindTitle {
  text-align: center;
  line-height: 120px;
  font-size: 32px;
}
.bind_item {
  display: flex;
  align-items: center;
  height: 60px;
  border: 2px solid #f2f2f2;
  font-size: 20px;
  margin-top: 25px;
}
.bind_item > img {
  width: 28px;
  height: 28px;
  margin: 0 16px 0 22px;
}
.bind_item > input {
  border: none;
  background: #fff;
  width: 260px;
  flex: 1;
}
.getCode {
  text-align: center;
  border-radius: 26px;
  color: #0076fe;
  font-size: 18px;
  padding: 8px 17px;
  border: none !important;
}
.getCode_default {
  border: #0076fe;
  background: #fff;
}
.sure {
  width: 558px;
  height: 70px;
  margin: 0 auto;
  background: #0076fe;
  text-align: center;
  color: #fff;
  line-height: 70px;
  font-size: 24px;
  border-radius: 70px;
  margin-top: 60px;
  margin-bottom: 40px;
}
.vipMessage_warp {
  display: flex;
  align-items: center;
  margin-top: 8px;
}
.vipMessage_warp > img {
  width: 18px;
  height: 18px;
  margin-right: 4px;
}
.vipMessage_log {
  width: 43px;
  height: 14px;
  line-height: 14px;
  color: #fff;
  background: #e9a2b8;
  border-radius: 7px;
  text-align: center;
  font-size: 8px;
  margin-right: 10px;
}
.vipMessage_number {
  display: flex;
  align-items: center;
  color: #e9a2b8;
  font-size: 11px;
}
.num_log {
  font-size: 8px;
  margin-left: 11px;
  height: 12px;
  line-height: 12px;
  color: #fff;
  text-align: center;
  width: 32px;
  background: #e9a2b8;
  border-radius: 1px;
}
.precent {
  position: relative;
  overflow: hidden;
  border-radius: 2px;
  margin-top: 2px;
}
.precent_bg {
  width: 94px;
  height: 3px;
  background: #e9a2b8;
}
.precent_plan {
  background: #fff;
  height: 3px;
  left: 0;
  top: 0;
  position: absolute;
}
.ifRegister {
  text-align: center;
  margin-top: 18px;
  color: #666;
}
.ifRegister > span {
  color: #333;
}
.warp_all input {
}

.chooseCityBox {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.box {
  width: 500px;
  height: 600px;
  box-sizing: border-box;
  padding-top: 50px;
  box-shadow: #ccc 0px 0px 50px 2px;
}
.login_logo {
  width: 213px;
  height: 44px;
  margin: 0 auto;
  margin-bottom: 55px;
}
.register_box_tit {
  color: #0076ff;
  font-size: 32px;
}
.logIcon {
  width: 50px;
  height: 50px;
}
.change {
  text-align: center;
  color: #666;
}
.forget_warp {
  display: flex;
  margin-top: 10px;
  justify-content: space-between;
  align-items: center;
  color: #b9bed1;
  font-size: 17px;
}
.forget_left {
  display: flex;
  align-items: center;
  color: #666;
}
.forget_left_l {
  border: 2px solid #e5e5e5;
  border-radius: 4px;
  margin-right: 5px;
}
</style>
